<!--
  知识点组件
  展示知识点列表，包含标题和内容
-->
<template>
  <div class="card">
    <h3>知识点</h3>
    <ul>
      <li v-for="point in points" :key="point.title">
        <h4>{{ point.title }}</h4>
        <p>{{ point.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  points: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
.card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
}
</style>